<template>
    <div id="app3">
        <header class="header">
            <div class="title">
                <!-- <router-link to="/xqda"> -->
                <img src="../../assets/images/01_11.png" alt="" class="img_zuo" @click="fanhui_btn" />
                <!-- </router-link> -->
                <div>{{ym_title}}</div>
            </div>
        </header>
        <div class="main">
            <div class="main_head">
                <span class="main_head_font">九小门店{{count_hu}}户</span>
                <div class="main_head_ditu" @click="ditu_btn">
                    <img src="../../assets/images/dw_1.png" alt="" class="img_dt">
                    <span class="font_36">地图></span>
                </div>
            </div>
            <div class="main_center">
                <div class="main_center_item">
                    <div>
                        <div class="su_prent" @click="toTypeList(data_bzt[0].name)">
                            <span class="su su_1 b_c_1"></span>
                            <span class="font_42">{{data_bzt[0].name  | qiegei_tongji}}</span>
                        </div>
                        <div class="font_36_huise">{{data_bzt[0].value}}%({{data_bzt[0].cunt}}户)</div>
                    </div>
                    <div>
                        <div class="su_prent" @click="toTypeList(data_bzt[1].name)">
                            <span class="su su_3 b_c_2"></span>
                            <span class="font_42">{{data_bzt[1].name  | qiegei_tongji}}</span>
                        </div>
                        <div class="font_36_huise">{{data_bzt[1].value}}%({{data_bzt[1].cunt}}户)</div>
                    </div>
                </div>
                <div id="bingtu" ref="bingtu"></div>
                <div class="main_center_item">
                    <div>
                        <div class="su_prent" @click="toTypeList(data_bzt[3].name)">
                            <span class="su su_2 b_c_4"></span>
                            <span class="font_42">{{data_bzt[3].name  | qiegei_tongji}}</span>
                        </div>
                        <div class="font_36_huise">{{data_bzt[3].value}}%({{data_bzt[3].cunt}}户)</div>
                    </div>
                    <div>
                        <div class="su_prent" @click="toTypeList(data_bzt[5].name)">
                            <span class="su su_4 b_c_6"></span>
                            <span class="font_42">{{data_bzt[5].name  | qiegei_tongji}}</span>
                        </div>
                        <div class="font_36_huise">{{data_bzt[5].value}}%({{data_bzt[5].cunt}}户)</div>
                    </div>
                </div>
                <div class="main_center_fool">
                    <div>
                        <div>
                            <div class="su_prent" @click="toTypeList(data_bzt[2].name)">
                                <span class="su su_5 b_c_3"></span>
                                <span class="font_42">{{data_bzt[2].name  | qiegei_tongji}}</span>
                            </div>
                            <div class="font_36_huise">{{data_bzt[2].value}}%({{data_bzt[2].cunt}}户)</div>
                        </div>
                    </div>
                    <div>
                        <div>
                            <div class="su_prent" @click="toTypeList(data_bzt[6].name)">
                                <span class="su su_6 b_c_7"></span>
                                <span class="font_42">{{data_bzt[6].name  | qiegei_tongji}}</span>
                            </div>
                            <div class="font_36_huise">{{data_bzt[6].value}}%({{data_bzt[6].cunt}}户)</div>
                        </div>
                    </div>
                    <div>
                        <div>
                            <div class="su_prent" @click="toTypeList(data_bzt[8].name)">
                                <span class="su su_7 b_c_9"></span>
                                <span class="font_42">{{data_bzt[8].name  | qiegei_tongji}}</span>
                            </div>
                            <div class="font_36_huise">{{data_bzt[8].value}}%({{data_bzt[8].cunt}}户)</div>
                        </div>
                    </div>
                </div>
                <div class="main_center_fool">
                    <div>
                        <div>
                            <div class="su_prent" @click="toTypeList(data_bzt[7].name)">
                                <span class="su su_8 b_c_8"></span>
                                <span class="font_42">{{data_bzt[7].name  | qiegei_tongji}}</span>
                            </div>
                            <div class="font_36_huise">{{data_bzt[7].value}}%({{data_bzt[7].cunt}}户)</div>
                        </div>
                    </div>
                    <div>
                        <div>
                            <div class="su_prent" @click="toTypeList(data_bzt[4].name)">
                                <span class="su su_9 b_c_5"></span>
                                <span class="font_42">{{data_bzt[4].name | qiegei_tongji}}</span>
                            </div>
                            <div class="font_36_huise">{{data_bzt[4].value  }}%({{data_bzt[4].cunt}}户)</div>
                        </div>
                    </div>
                    <div>
                        <div>
                            <div class="su_prent" @click="toTypeList(data_bzt[9].name)">
                                <span class="su su_10 b_c_10"></span>
                                <span class="font_42">{{data_bzt[9].name}}</span>
                            </div>
                            <div class="font_36_huise">{{data_bzt[9].value}}%({{data_bzt[9].cunt}}户)</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="hr_s">
                <div class="hr"></div>
            </div>
            <div class="main_fool">
                <div>
                    <div class="main_fool_title">巡查排查</div>
                    <div class="xcpc_prent">
                        <div id="zx_tu" ref="zx_tu"></div>
                    </div>
                </div>
                <div class="main_fool_su"></div>
                <div>
                    <div class="main_fool_title">
                        <span>隐患走势</span>
                        <div class="main_fool_title_right">
                            <div class="yh_icon">
                                <div></div>
                                <span>&nbsp;隐患</span>
                            </div>
                            &nbsp;&nbsp;
                            <div class="yzg_icon">
                                <div></div>
                                <span>&nbsp;已整改</span>
                            </div>
                        </div>
                    </div>
                    <div class="yhzs_prent">
                        <div id="zz_tu" ref="zz_tu"></div>
                    </div>
                </div>
            </div>
            <div class="hr_s">
                <div class="hr"></div>
            </div>

            <div class="mian_list mian_list_sq" v-show="sq_list_show">
                <!--<van-pull-refresh v-model="refreshing" @refresh="onRefresh">-->
                  <van-list v-model="loading" :finished="finished" @load="onLoad">
                    <div class="lie_list_item" v-for="(obj,i) of sq_list" @click="openXq(obj)">
                      <div class="xh">{{i+1}}</div>
                      <div class="name">{{obj.dwMc?jiequDz(obj.dwMc,8):''}}</div>
                      <div class="type">{{obj.lb}}</div>
                      <img src="../../assets/images/tel.png" alt="" class="dianhua" @click.stop="tel(obj)" />
                    </div>
                  </van-list>
                <!--</van-pull-refresh>-->
            </div>
            <div class="mian_list" v-show="!sq_list_show">
                <div v-for="(item, index) in items" :key="index">
                    <div :class="{'item':true,'item_active':items.length-1==index || items.length%2==0&&items.length-2==index }"
                        @click="btn_h(item.dwid,item.count,item.dwMc,item.lxmc)">
                        <div>{{item.dwMc}}</div>
                        <div>{{item.count}} 户</div>
                    </div>
                </div>

            </div>
        </div>
        <Tabbar></Tabbar>
    </div>
</template>
<script>
    import { Dialog } from 'vant';
    import Tabbar from "../tabbar.vue";
    import echarts from "echarts"
    export default {
        name: "tj_tu_4",
        data() {
            return {
                menuFlag: false,
                userId: null,
                items: [],
                data_bzt: [
                    { "name": "", "value": "" },
                    { "name": "", "value": "" },
                    { "name": "", "value": "" },
                    { "name": "", "value": "" },
                    { "name": "", "value": "" },
                    { "name": "", "value": "" },
                    { "name": "", "value": "" },
                    { "name": "", "value": "" },
                    { "name": "", "value": "" },
                    { "name": "", "value": "" },
                ],
                data_zxt: [],
                data_zxt_value: [0],
                data_zzt: [],
                data_zzt_value: [0],
                data_zzt_value1: [],
                list_id: "",
                count_hu: null,
                ym_title: "",
                is_jd: false,
                list_path_canshu: [],
                ct_cunt: 0,
                sehqu_id: null,
                color: "rgba(0,0,0,0)",

                dwId:'',
                lev:'',

                sq_list_show:[],
                sq_list:[],
                sq_sqid:null,
                sq_page:1,
                sq_pageSize:50,
                loading: false,
                finished: false,
                refreshing: false,
                load_over:false,
                yue:null
            }
        },
        components: {
            Tabbar
        },
        methods: {
            dateLocation () {
              let month = {
                start: 0,
                end: 0
              };
              // if (mouths <= 12) {
                month.start = (100/12)*(new Date().getMonth() + 1 - 3)
                month.end = (100/12)*(new Date().getMonth() + 1)
              // } else {
              //   month.start = (100/30)*(new Date().getDate() - 7)
              //   month.end = (100/30)*(new Date().getDate() - 1)
              // }
              return month
            },
            fanhui_btn() {
                console.log("返回", this.ct_cunt)
                this.$router.back()

            },
            info() {//获取数据
                var _this = this;
                try {
                    plus.nativeUI.showWaiting("正在加载...");
                } catch (e) {
                    console.log('plus问题');
                }
                _this.axios
                    .post(
                        `${_this.$global_msg.Url.host}/total/selectNineStatistics?userid=${_this.userId}`
                    )
                    .then(res => {
                        console.log(res);
                        if (res.data.code == 0) {
                            let a = [
                                { "name": "", "value": "" },
                                { "name": "", "value": "" },
                                { "name": "", "value": "" },
                                { "name": "", "value": "" },
                                { "name": "", "value": "" },
                                { "name": "", "value": "" },
                                { "name": "", "value": "" },
                                { "name": "", "value": "" },
                                { "name": "", "value": "" },
                                { "name": "", "value": "" },
                            ]
                            _this.count_hu = res.data.rows.houseAmount//总数
                            _this.dwId = res.data.rows.dwId;
                            _this.lev = res.data.rows.lev;

                            // 列表
                            _this.items = res.data.rows.Data
                            _this.list_id = '';
                            var list_id = '';
                            res.data.rows.Data.forEach(element => {
                                list_id += "," + element.dwid
                            });
                            list_id = list_id.substring(1)
                            _this.list_id = list_id;

                            // 饼状图
                            console.log(res.data.rows.ratioList)
                            res.data.rows.ratioList.forEach(element => {
                                if (element.type == 1) {
                                    a[0] = { 'name': "小商场", "value": element.percentage, "cunt": element.count,"class":".su_1",color:"#238BFF" }
                                } else if (element.type == 2) {
                                    a[1] = { 'name': "小医院", "value": element.percentage, "cunt": element.count, }
                                } else if (element.type == 3) {
                                    a[2] = { 'name': "小餐饮场所", "value": element.percentage, "cunt": element.count, }
                                } else if (element.type == 4) {
                                    a[3] = { 'name': "小旅馆", "value": element.percentage, "cunt": element.count, }
                                } else if (element.type == 5) {
                                    a[4] = { 'name': "小歌舞厅娱乐场所", "value": element.percentage, "cunt": element.count, }
                                } else if (element.type == 6) {
                                    a[5] = { 'name': "小网吧", "value": element.percentage, "cunt": element.count, }
                                } else if (element.type == 7) {
                                    a[6] = { 'name': "小美容洗浴场所", "value": element.percentage, "cunt": element.count, }
                                } else if (element.type == 8) {
                                    a[7] = { 'name': "小生产加工企业", "value": element.percentage, "cunt": element.count, }
                                } else if (element.type == 9) {
                                    a[8] = { 'name': "废品回收", "value": element.percentage, "cunt": element.count, }
                                } else if (element.type == 10) {
                                    a[9] = { 'name': "其他", "value": element.percentage, "cunt": element.count, }
                                }
                            });
                            _this.data_bzt = a
                            console.log(_this.data_bzt[0].name)
                            console.log(_this.data_bzt)

                            // 折现图
                            _this.data_zxt_value = [];
                            for(var n=0;n<12;n++){
                              _this.data_zxt_value.push(null);
                            }
                            if(res.data.rows.xunchaList){
                              res.data.rows.xunchaList.forEach(element => {
                                  _this.data_zxt_value[element.time-1] = element.num;
                              });
                              _this.data_zxt_value=_this.data_zxt_value.slice(0,_this.yue)
                            }

                            // 柱状图
                            _this.data_zzt_value = [];//已整改
                            _this.data_zzt_value1 = [];//隐患
                            for(var n=0;n<12;n++){
                              _this.data_zxt_value.push(null);
                              _this.data_zzt_value1.push(null);
                            }
                            if(res.data.rows.yhList&&res.data.rows.yhList.zgList){
                              res.data.rows.yhList.zgList.forEach(element => {
                                  _this.data_zzt_value[element.time-1] = element.num;
                              });
                            }
                            if(res.data.rows.yhList&&res.data.rows.yhList.yhList){
                              res.data.rows.yhList.yhList.forEach(element => {
                                  _this.data_zzt_value1[element.time-1] = element.num;
                              });
                            }

                            _this.bingzhangtu()
                            _this.zhexiantu()
                            _this.zhuzhuangtu()
                            _this.ym_title = localStorage.getItem('Title') +'九小门店';

                            if(res&&res.data&&res.data.rows&&res.data.rows.Data&&res.data.rows.Data.length==1&&res.data.rows.Data[0].lxmc=='社区'){
                              _this.showShequList(res.data.rows.Data[0]);
                            }else{
                              _this.showShequList(null);
                            }

                            try {
                                plus.nativeUI.closeWaiting();
                            } catch (e) {
                                console.log('plus问题');
                            }
                        } else {
                            _this.$toast('服务器数据异常!');
                        }

                    }).catch(function (error) {
                        console.log(error);
                        _this.$terminal._error(error);
                        plus.nativeUI.closeWaiting();
                        // alert("获取类型接口异常")

                    });
            },
            showShequList(item){
              console.log(item);
              if(item){
                this.sq_list_show = true;
                this.sq_sqid = item.dwid;
                this.sq_page = 1;
                this.load_over = true;
                this.refreshing = true;
                this.onRefresh();
              }else{
                this.sq_list_show = false;
                this.sq_sqid = null;
                this.sq_list = [];
                this.sq_page = 1;
                this.load_over = false;
              }
            },
            onLoad() {
              var _this = this;
              if (_this.refreshing) {
                _this.sq_list = [];
                _this.refreshing = false;
                _this.sq_page = 1;
              }
              if(!_this.load_over){
                _this.loading = false;
                _this.finished = true;
                _this.refreshing = false;
                return;
              }

              /*try{
                plus.nativeUI.showWaiting("正在加载...");
              }catch(e){
                console.log(e.message);
              }*/
              var params = {
                communityId:_this.sq_sqid,
                page:_this.sq_page,
                pageSize:_this.sq_pageSize
              };
              _this.axios.get(_this.$global_msg.Url.host + "/nineStore/selectNineStroeByExample",{
              	params: params
              }).then(function (data) {
                console.log('selectNineStroeByExample:',data);
                if(data&&data.data){
                  if(data.data.code==0){
                    for(var n=0;n<data.data.rows.length;n++){
                      data.data.rows[n].lb = _this.getListObjMc('lb',data.data.rows[n].type);
                    }
                    _this.sq_list = _this.sq_list.concat(data.data.rows);
                    if(_this.sq_list.length>=data.data.total){
                      _this.finished = true;
                    }else{
                      _this.sq_page++;
                    }
                  }else{
                    _this.$toast(data.data.msg);
                  }
                }else{
                  _this.$toast('查询失败');
                }
                _this.loading = false;

                try{
                  plus.nativeUI.closeWaiting();
                }catch(e){
                  console.log(e.message);
                }
              }).catch(error => {
                _this.$terminal._error(error);
              });
            },
            onRefresh() {
              // 清空列表数据
              this.finished = false;

              // 重新加载数据
              // 将 loading 设置为 true，表示处于加载状态
              this.loading = true;
              this.onLoad();
            },
            jiequDz(dz,num){
              if(dz.length>num){
                dz = dz.substring(0,num);
              }
              return dz;
            },
            openXq(obj){//打开详情查看
              console.log(obj);
              var _this = this;
              var xqda_params = {
                xq_id:obj.id,//详情id
                from:'/jxmd_tj_tu_1'//详情返回路径
              };
              localStorage.setItem("xqda_params",JSON.stringify(xqda_params));
              localStorage.setItem("bzt_list_scrollTop1",$('#app3').scrollTop());
              this.$router.push("/jxmd_see");
            },
            tel(obj){
              var _this = this;
              var phone = (obj.phone||obj.phone===0)?obj.phone:'';
              if (phone.toString().length >= 1) {
                Dialog.confirm({
                  title: '提示',
                  message: '是否拨打 ' + phone + ' ？',
                  confirmButtonText: "拨打", //改变确认按钮上显示的文字
                  cancelButtonText: "取消" //改变取消按钮上显示的文字
                }).then(() => {
                  //console.log("点击了确认按钮噢")
                  plus.device.dial(phone, false);
                }).catch(() => {
                  //console.log("点击了取消按钮噢")
                });
            	}
            },
            getListObjMc(name,key){//根据id获取列表对象的名称
              var cqxz = [
                  {mc:'住宅',id:1},
                  {mc:'商用',id:2},
                  {mc:'商住混合',id:3},
                  {mc:'其他',id:4}
              ];
              var xfqk = [
                  {mc:'正常',id:1},
                  {mc:'部分设施缺失但能正常供水',id:2},
                  {mc:'不能正常供水',id:3}
              ];
              var lb = [
                {mc:'小商场',id:1},
                {mc:'小医院',id:2},
                {mc:'小餐饮场所',id:3},
                {mc:'小旅馆',id:4},
                {mc:'小歌舞厅娱乐场所',id:5},
                {mc:'小网吧',id:6},
                {mc:'小美容洗浴场所',id:7},
                {mc:'小生产加工企业',id:8},
                {mc:'废品回收',id:9},
                {mc:'其他',id:10}
              ];
              var result = '';
              var list = [];
              if(name=='cqxz'){
                list = cqxz;
              }else if(name=='xfqk'){
                list = xfqk;
              }else if(name=='lb'){
                list = lb;
              }

              for(var n=0;n<list.length;n++){
                if(list[n].id===key){
                  result = list[n].mc;
                }
              }
              return result;
            },
            getTypeId(key){//根据名称获取列表对象的id
              var result = '';
              var list = [
                  {mc:'小商场',id:1},
                  {mc:'小医院',id:2},
                  {mc:'小餐饮场所',id:3},
                  {mc:'小旅馆',id:4},
                  {mc:'小歌舞厅娱乐场所',id:5},
                  {mc:'小网吧',id:6},
                  {mc:'小美容洗浴场所',id:7},
                  {mc:'小生产加工企业',id:8},
                  {mc:'废品回收',id:9},
                  {mc:'其他',id:10}
              ];

              for(var n=0;n<list.length;n++){
                if(list[n].mc===key){
                  result = list[n].id;
                }
              }
              return result;
            },
            toTypeList(name){
              var xqda_params = {
                  path: '/jxmd_tj_tu_1',//列表或地图页面返回的路径
                  type:name
              };
              xqda_params.cs_cx = {
                dwId: this.dwId,//id
                type: this.getTypeId(name),//类别
                lev: this.lev,//1街道 2社区
              };
              if(this.ym_title!= (localStorage.getItem('Title') +'九小门店')){
                xqda_params.title = this.ym_title;
              }
              localStorage.setItem("xqda_params",JSON.stringify(xqda_params));
              sessionStorage["tongji_ct_cunt"] = this.ct_cunt
              sessionStorage["tongji_list_path_canshu"] = JSON.stringify(this.list_path_canshu)
              this.$router.push({
                  path: '/bzt_list_jxmd'
              })
            },
            btn_h(dwId, count, name, lxmc) {//点击列表
                if (lxmc == "街道") {
                    this.ct_cunt = 1
                    this.sehqu_id = dwId
                    this.list_path_canshu[0] = { "dwId": dwId, "count": count, "name": name, "lxmc": lxmc,"ct_cunt":this.ct_cunt }
                    // console.log(this.list_path_canshu)
                    localStorage.setItem('Title', name)
                    localStorage.setItem("bzt_list_scrollTop1",$('#app3').scrollTop());
                    sessionStorage["tongji_list_path_canshu"] = JSON.stringify(this.list_path_canshu)
                    this.$router.push("/jxmd_tj_tu_2")
                }
            },
            bingzhangtu() {//饼状图
                // var myChar = echarts.init(document.getElementById("bingtu"));
                let a = this.$refs.bingtu
                if (a) {
                    let myChar = echarts.init(a)
                    // myChar.on('click', function (params) {//点击事件
                    //     console.log(params) //获取点击区域的数据
                    //     console.log(params.data.class)
                    //     // $(params.data.class)

                    //     $(".su").next().css({color:"#000"})
                    //     $(params.data.class).next().css({color:params.data.color})

                    // });
                    var option = {
                        series: [
                            {
                                // name: '安全警示',
                                type: 'pie',
                                radius: ['40%', '80%'],
                                labelLine: {//不显示枝条
                                    show: false
                                },
                                label: {
                                    show: false,
                                    position: 'center'
                                },
                                color: ['#6000ff', '#ffa800', '#08d86a', '#238bff', '#8402b4', '#ee48d9', '#007022', '#303030', '#48c5ee', '#9d9802',],//饼图颜色
                                data: this.data_bzt
                            }
                        ]
                    };
                    myChar.setOption(option)
                }
            },
            zhexiantu() {//折线图
                // var myChart_zx = echarts.init(document.getElementById("zx_tu"));
                let that = this;
                let a = this.$refs.zx_tu;
                 var max=null;
                if (Math.max.apply(null, this.data_zxt_value) < 10) {
                   max = 10;
                }
                if (a) {
                    let myChar = echarts.init(a)
                    var option = {
                        color: ['#3398DB'],
                        grid: {
                            left: '3%',
                            right: '10%',
                            bottom: '0%',
                            top: '27%',
                            containLabel: true
                        },
                      dataZoom: [
                        //X轴内置滑动
                        {
                          type: 'inside',  //内置滑动，随鼠标滚轮展示
                          xAxisIndex: [0],
                          // minSpan:40,
                          // maxSpan:50,
                          start: that.dateLocation().start,
                          end: that.dateLocation().end
                        }],
                        xAxis: [
                            {
                                type: 'category',
                                //  name : '年',
                                // boundaryGap: false,
                                default: false,
                                // data: this.data_zxt_month,
                                data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
                                axisLabel: {
                                    show: true,
                                    interval: 0,//设置间隔
                                    textStyle: {
                                        color: '#535353',//字体颜色,
                                        fontSize: 12,
                                    },
                                },
                                axisTick: {
                                    show: false,//取消刻度尺

                                },
                                axisLine: {
                                    show: false,
                                    // lineStyle: {
                                    //     color: '#33a6d2',
                                    //     width:2,
                                    // }
                                }
                            }
                        ],
                        yAxis: [
                            {
                                name: '家次',
                                type: 'value',
                                boundaryGap: true,
                                nameLocation: "end",
                                 //min: 10,
                                max:max,
                                splitLine: {
                                    // show: false//隐藏横线
                                    lineStyle: {
                                        color: '#DFDFDF',
                                        width: 2,
                                    }
                                },
                                axisLabel: {
                                    show: true,
                                    interval: 0,//设置间隔
                                    textStyle: {
                                        color: '#535353',//字体颜色
                                        fontSize: 12,
                                    },
                                },
                                axisTick: {
                                    interval: 0,
                                    alignWithLabel: true,
                                    show: false,//取消刻度尺
                                },
                                axisLine: {
                                    show: false,//取消刻度尺
                                    // lineStyle: {
                                    //     color: '#33a6d2'//坐标线颜色
                                    // }
                                }
                            }
                        ],
                        series: [
                            {
                                name: '2019年',
                                type: 'line',
                                // smooth: true,//曲线
                                //  stack: '亩',
                                // symbol: "none",//去圆点
                                itemStyle: {
                                    normal: {
                                        label: {
                                          show: true,
                                          position: 'top',
                                          textStyle: {
                                            color: 'black',
                                            fontSize: 12
                                          }
                                        },
                                        lineStyle: {
                                            color: '#00A0E9',//线颜色
                                            width: 2,//线宽
                                        }
                                    }
                                },
                                data: this.data_zxt_value
                            }
                        ]
                    };
                    myChar.setOption(option);
                }
            },
            zhuzhuangtu() {//柱状图
                var that = this;
                // var myChart_zz = echarts.init(document.getElementById("zz_tu"));
                let a = this.$refs.zz_tu;
                var max = null;
                if (Math.max.apply(null, this.data_zzt_value) > Math.max.apply(null, this.data_zzt_value1)) {
                	if (Math.max.apply(null, this.data_zzt_value) > 10) {
                		max = null
                	} else {
                		max = 10;
                	}
                } else {
                	if (Math.max.apply(null, this.data_zzt_value1) > 10) {
                		max = null
                	} else {
                		max = 10;
                	}
                }
                if (a) {
                    let myChar = echarts.init(a)


                    var option = {
                        color: ['#3398DB'],
                        grid: {
                            left: '2%',
                            right: '5%',
                            bottom: '0%',
                            top: '27%',
                            containLabel: true
                        },
                      dataZoom: [
                        //X轴内置滑动
                        {
                          type: 'inside',  //内置滑动，随鼠标滚轮展示
                          xAxisIndex: [0],
                          // minSpan:40,
                          // maxSpan:50,
                          start: that.dateLocation().start,//初始化时，滑动条宽度开始标度
                          end:that.dateLocation().end   //初始化时，滑动条宽度结束标度
                        }],
                        xAxis: [
                            {
                                type: 'category',
                                // data: this.data_zzt_month,
                                data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
                                axisTick: {
                                    show: false,//取消刻度尺
                                },
                                axisLabel: {
                                    show: true,
                                    interval: 0,//设置间隔
                                    textStyle: {
                                        color: '#535353',//字体颜色,
                                        fontSize: 12,
                                    },
                                },
                                axisLine: {
                                    show: false,
                                }
                            }
                        ],
                        yAxis: [
                            {
                                name: '个',
                                type: 'value',
                                //min: 10,
                                max:max,
                                splitLine: {
                                    // show: false//隐藏横线
                                    lineStyle: {
                                        color: '#DFDFDF',
                                        width: 2,
                                    }
                                },
                                axisLabel: {
                                    show: true,
                                    textStyle: {
                                        color: '#535353',//字体颜色
                                        fontSize: 12,
                                    },
                                },
                                axisTick: {
                                    show: false,//取消刻度尺
                                },
                                axisLine: {
                                    show: false,//取消刻度尺
                                }
                            }
                        ],

                        series: [
                            {
                                // name: '直接访问',
                                color: "#FD3F3F",
                                type: 'bar',
                                // barGap: 0,
                                barWidth: '30%',
                                data: this.data_zzt_value1,//隐患
                                itemStyle: {
                                  normal: {
                                    label: {
                                      show: true,
                                      position: 'top',
                                      textStyle: {
                                        color: '#000',
                                        fontSize: 12
                                      }
                                    }
                                  }
                                }
                            },
                            {
                                // name: '直接访问',
                                //color: this.color,
                                type: 'bar',
                                barWidth: '30%',
                                data: this.data_zzt_value,
                                itemStyle: {
                                  normal: {
                                    label: {
                                      show: true,
                                      position: 'top',
                                      textStyle: {
                                        color: '#000',
                                        fontSize: 12
                                      }
                                    }
                                  }
                                }
                            }
                        ]
                    };
                    myChar.setOption(option);
                }
            },
            sequence(a, b) {//排序
                if (a.id > b.id) {
                    return -1;
                } else if (a.id < b.id) {
                    return 1
                } else {
                    return 0;
                }
            },
            ditu_btn() {
                if(!(this.list_id||this.list_id===0)){
                  return;
                }
                var xqda_params = {
                    path: '/jxmd_tj_tu_1',//列表或地图页面返回的路径
                    cs_cx: {//列表或地图页面查询参数
                        dwId: this.list_id,
                        userId: this.userId
                    },
                    cx_type: 'jxmd'
                };
                if(this.ym_title!= (localStorage.getItem('Title') +'九小门店')){
                  xqda_params.title = this.ym_title;
                }
                localStorage.setItem("xqda_params", JSON.stringify(xqda_params));
                sessionStorage["tongji_ct_cunt"] = this.ct_cunt
                sessionStorage["tongji_list_path_canshu"] = JSON.stringify(this.list_path_canshu)
                this.$router.push({
                    path: '/mode_map'
                })
            },
        },
        beforeRouteLeave(to, from, next) {
            Dialog.close();
            next();
        },
        //进入该页面时，用之前保存的滚动位置赋值
        beforeRouteEnter (to, from, next) {
            next(vm => {
              var bzt_list_scrollTop1 = localStorage.getItem("bzt_list_scrollTop1")?JSON.parse(localStorage.getItem("bzt_list_scrollTop1")):null;
              if(bzt_list_scrollTop1||bzt_list_scrollTop1===0){
                $('#app3').animate({scrollTop: bzt_list_scrollTop1}, 0);
                var list_update = localStorage.getItem("list_update")?JSON.parse(localStorage.getItem("list_update")):null;
                if(list_update){
                  var list = vm.sq_list;
                  vm.list = [];
                  for(var n=0;n<list.length;n++){
                    if(list[n].id==list_update.id){
                      list[n].dwMc = list_update.dwMc;
                      list[n].lb = vm.getListObjMc('lb',list_update.type);
                      list[n].phone = list_update.phone;
                    }
                  }
                  vm.sq_list = list;
                  vm.$forceUpdate();
                }
              }else{
                vm.userId = localStorage.getItem("userId")//获取访问id
                vm.ym_title = localStorage.getItem('Title') +'九小门店';
                vm.yue = new Date().getMonth() + 1;

                vm.list_path_canshu = JSON.parse(sessionStorage.getItem("tongji_list_path_canshu"))
                vm.ct_cunt = JSON.parse(sessionStorage.getItem("tongji_ct_cunt"))
                vm.info()
              }
              localStorage.removeItem("bzt_list_scrollTop1");
              localStorage.removeItem("list_update");
              localStorage.removeItem("xqda_params");
            })
        },
        mounted() {
          var _this = this;
          //物理返回
          // window.addEventListener("popstate", function(){
          //   _this.fanhui_btn();
          // }, false);
        },
        created() {

        },
    };
</script>
<style scoped>
    * {
        box-sizing: border-box;
    }

    .header {
        height: 1.8519rem;
        background: #007aff;
        padding-top: 0.8333rem;
        box-sizing: border-box;
        position: fixed;
        width: 100%;
        top: 0;
        z-index: 20;
        font-size: 0.388888rem;
    }

    .title {
        padding: 0 0.3704rem;
        display: flex;
        align-items: center;
        color: #fff;
    }

    .title>div {
        width: 100%;
        font-size: 0.4444rem;
        text-align: center;
    }

    .img_zuo {
        width: 0.2593rem;
        height: 0.463rem;
    }

    .btn-add {
        position: absolute;
        right: 0.37037rem;
        font-size: 1.111111rem !important;
    }

    .btn-search {
        position: absolute;
        right: 1.388888rem;
        bottom: 0.388888rem;
        width: 0.629629rem;
        height: 0.629629rem;
    }

    .btn-change {
        position: absolute;
        left: 1.537037rem;
        font-size: 0.388888rem;
        bottom: 0.444444rem;
    }

    /*  */

    .main {
        padding-top: 1.8519rem;
        /* height: 100vh; */
        box-sizing: border-box;
        background: #fff;
        padding-bottom: 1.6667rem;
        /* padding-top: 10.0008px; */
    }

    .main_head {
        height: 1.3889rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 0.3704rem;
    }

    .img_dt {
        width: 0.3148rem;
        height: 0.4259rem;
        margin-right: 0.0556rem;
    }

    .main_head_ditu {
        display: flex;
        align-items: center;
        color: #4568FF;
        font-size: 0.3889rem;
        margin-right: 0.3704rem;
    }

    .main_head_font {
        font-size: 0.4444rem;
        font-weight: 400;
    }

    .font_36 {
        font-size: 0.3333rem;
    }

    .font_36_huise {
        font-size: 0.3333rem;
        color: #8E8E8E;
        margin-top: 0.1852rem;
        width: 100%;
        padding-left: 0.5rem;
    }

    .font_42 {
        font-size: 0.3519rem;

    }

    /* 圆饼图 */
    .main_center {
        display: flex;
        align-items: center;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    .main_center>div.main_center_item {
        width: 3.3333rem;
        height: 3.3333rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: end;
        padding: 0.3704rem 0;
        padding-left: 0.7407rem;
        box-sizing: border-box;
    }

    #bingtu {
        width: 3.3333rem;
        height: 3.3333rem;
    }

    .main_center_fool {
        width: 100%;
        display: flex;
        /* padding-left: 0.7407rem; */
    }

    .main_center_fool>div {
        width: 3.3333rem;
        height: 1.6667rem;
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        padding-left: 0.7407rem;
    }

    /* .main_center_fool>div:last-child{
        padding-left: 0.5rem;
    } */

    .su {
        width: 0.1296rem;
        height: 0.463rem;
        border-radius: 1.8519rem;
        background: #238BFF;
        display: inline-block;
        margin-right: 0.3704rem;
    }

    .su_1 {
        background: #238BFF;
    }

    .su_2 {
        background: #23C9FF;
    }

    .su_3 {
        background: #FFD548;
    }

    .su_4 {
        background: #7264F9;
    }

    .su_5 {
        background: #B164F9;
    }

    .su_6 {
        background: #64F99C;
    }

    .su_7 {
        background: #F9C664;
    }

    .su_8 {
        background: #F9A664;
    }

    .su_9 {
        background: #BEFB3B;
    }

    .su_10 {
        background: #DDDDDD;
    }

    .b_c_1{
      background: #6000ff!important;
    }
    .b_c_2{
      background: #ffa800!important;
    }
    .b_c_3{
      background: #08d86a!important;
    }
    .b_c_4{
      background: #238bff!important;
    }
    .b_c_5{
      background: #8402b4!important;
    }
    .b_c_6{
      background: #ee48d9!important;
    }
    .b_c_7{
      background: #007022!important;
    }
    .b_c_8{
      background: #303030!important;
    }
    .b_c_9{
      background: #48c5ee!important;
    }
    .b_c_10{
      background: #9d9802!important;
    }

    .su_prent {
        display: flex;
        align-items: center;
    }

    .hr_s {
        padding: 0 0.3704rem;
    }

    .hr {
        width: 100%;
        height: 0.3704rem;
        background: #F7F7F7;
        box-sizing: border-box;
    }

    /* 折线图 柱张图 */
    .main_fool {
        width: 100%;
        height: 4.4444rem;
        padding: 0 0.3704rem;
        display: flex;
        box-sizing: border-box;
        align-items: center;
        justify-content: space-between;
    }

    .yhzs_prent {
        width: 4.296rem;
        height: 3.5185rem;
        overflow-x: hidden;
        /* padding-right: 0.1852rem; */
    }

    #zx_tu {
        width: 4.296rem;
        height: 3.5185rem;
    }

    .main_fool>div {
        width: 48%;
    }

    .main_fool_title {
        font-size: 0.3889rem;
        font-weight: 400;
        /* margin-top: 0.2593rem; */
        /* margin-left: 5%; */
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .main_fool_title_right {
        display: flex;
        align-items: center;
    }

    .yh_icon,
    .yzg_icon {
        display: flex;
        align-items: center;
    }

    .yh_icon>span,
    .yzg_icon>span {
        font-size: 0.2222rem;
        font-weight: 400;
    }

    .yh_icon>div:first-child {
        width: 0.3704rem;
        height: 0.1481rem;
        background: #FD3F3F;
    }

    .yzg_icon>div:first-child {
        width: 0.3704rem;
        height: 0.1481rem;
        background: #3398DB;
    }

    /* 柱状图 */
    .xcpc_prent {
        width: 4.296rem;
        height: 3.5185rem;
        overflow-x: hidden;
        /* padding-right: 0.1852rem; */
    }

    #zz_tu {
        width: 4.296rem;
        height: 3.5185rem;
    }

    .main_fool_su {
        width: 1px !important;
        height: 3.6111rem;
        border-right: 1Px solid #ddd;
    }

    .mian_list {
        width: 100%;
        display: flex;
        padding: 0.2778rem 0;
        flex-wrap: wrap;
    }

    .mian_list>div {
        width: 50%;
        padding-left: 0.3704rem;
        padding-right: 0.1852rem;
        box-sizing: border-box;
        border-right: 1Px solid #ddd;
    }

    .mian_list>div:nth-child(2n) {
        border-right: none;
        padding-left: 0.1852rem;
    }

    .item {
        display: flex;
        justify-content: space-between;
        padding-left: 0.3704rem;
        padding-right: 0.1852rem;
        box-sizing: border-box;
        border-bottom: 1Px solid #ddd;
        /* border-top: 1Px solid #ddd; */
        margin-bottom: -1Px;
        height: 1.3889rem;
        align-items: center;
    }

    .item>div {
        font-size: 0.3333rem;
    }

    .item_active {
        border: none;
    }

    #app3{
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      overflow-y: scroll;
    }
    /*社区显示的列表*/
    .mian_list_sq div{
      width: 100%;
    }
    .lie_list_item {
    	height: 1.37037rem;
    	border-bottom: 0.018518518518518517rem solid #f1f1f1;
      display: flex;
      align-items: center;
    }
    .lie_list_item .xh{
    	width: 1rem;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .lie_list_item .name{
    	flex: 1;
      height: 100%;
      display: flex;
      align-items: center;
      font-size: 0.388888rem;
      margin-left: 0.185185rem;
    }
    .lie_list_item .type{
    	width: 3.5rem;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      font-size: 0.388888rem;
      margin-left: 0.185185rem;
    }
    .lie_list_item .mj{
      flex: 1;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.388888rem;
    }
    .lie_list_item .dianhua{
    	width: 0.518518rem;
      height: 0.518518rem;
      margin-left: 0.2778rem;
      margin-right: 0.407407rem;
    }
    .lie_list_item_bg {
    	background: #2E5DFE;
    	color: #fff;
    }
</style>
